<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h5 {
            text-align: center;
        }

        h2 {
            text-align: center;
        }

        h3 {
            text-align: center;
        }

        .tree span {
            text-align: center;
        }
    </style>
</head>

<body>
    <h5> 传智教育年会抽奖</h5>
    <h2>一等奖：<span class="one">???</span></h2>
    <h3>二等奖：<span class="two">???</span></h3>
    <h5>三等奖：<span class="tree">???</span></h5>

    <script>
        const personArr = ['张三', '李四', '王五', '赵六', '田七']
        const random = Math.floor(Math.random() * personArr.length)
        const one = document.querySelector('.one')
        one.innerText = personArr[random]
        personArr.splice(random, 1)//抽中谁再把他删除，然后继续抽奖
        const random2 = Math.floor(Math.random() * personArr.length)
        const two = document.querySelector('.two')
        two.innerText = personArr[random2]
        personArr.splice(random2, 1)
        const random3 = Math.floor(Math.random() * personArr.length)
        const tree = document.querySelector('.tree')
        tree.innerText = personArr[random3]
        personArr.splice(random3, 1)
    </script>
</body>

</html>